<template>
  <div class="app-container">
    <!-- <div class="cardBox">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col :span="19">
            <el-form-item label="名称：">
              <el-input
                :maxlength="20"
                v-model="searchForm.name"
                class="marginBottom"
                placeholder="请输入商户名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input
                onkeyup="value=value.replace(/\D/g,'')"
                v-model="searchForm.user_cellphone"
                class="marginBottom"
                placeholder="请输入手机号"
                clearable
              />
            </el-form-item>
            <el-form-item label="分类：">
              <el-select v-model="searchForm.level" placeholder="请选择分类">
                <el-option
                  v-for="item in CateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resettingWay"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div> -->
    <div class="grouping cardBox">
      <el-row class="marginBottom" :gutter="20" style="display: flex">
        <el-col>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            size="small"
            @click="savemerchantWay('/groupbuying/groupbuyingmerchant/save')"
            >添加商户</el-button
          >
        </el-col>
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resettingWay"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-col>
        <el-table
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          v-loading="loading"
          highlight-current-row
          :data="merchantList"
          style="width: 100%"
        >
          <el-table-column
            v-for="fruit in tableThead"
            :key="fruit"
            :label="tableTheadOptions[fruit].label"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="fruit == 'province_name'">
                {{ scope.row.province_name }}
                {{ scope.row.city_name }}
                {{ scope.row.county_name }}
              </div>
              <div v-else-if="fruit == 'type'">
                <el-tag v-if="scope.row[fruit] == 1" size="mini">个体</el-tag>
                <el-tag v-else size="mini">企业</el-tag>
              </div>
              <div v-else>
                {{ scope.row[fruit] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch
                @change="switchShowWay(scope.row)"
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="2"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            width="180"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-right: 10px"
                type="primary"
                size="mini"
                @click="
                  savemerchantWay(
                    '/groupbuying/groupbuyingmerchant/save?id=' + scope.row.id
                  )
                "
              >
                修改
              </el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="delGradeWay(scope.row)"
              >
                <el-button type="danger" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col class="marginTop marginBottom" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.page.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
import {
  addMerchantList,
  getCateList,
  editMerchantList,
  editMerchantStatus,
  delMerchantList,
  merchantDetail,
} from "@/api/merchant/index";
import {
  getCategoryList,
  getMerchantList,
  getMerchantDetail,
  delMerchant,
  merchantChange,
} from "@/api/groupbuying/index";
import { getUserList, getUserDetail, getRegionList } from "@/api/user/index";
import LogoUpload from "@/components/FileUpload";
const tableTheadOption = {
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  id: {
    label: "id",
    field: "id",
  },
  name: {
    label: "商户名称",
    field: "name",
  },
  responsible_person: {
    label: "负责人",
    field: "responsible_person",
  },
  responsible_person_cellphone: {
    label: "负责人电话",
    field: "responsible_person_cellphone",
  },
  type: {
    label: "类型",
    field: "type",
  },
  province_name: {
    label: "省市区",
    field: "province_name",
  },
  address: {
    label: "详细地址",
    field: "address",
  },
};

const allTableThead = [
  "created_at",
  "id",
  "name",
  "responsible_person",
  "responsible_person_cellphone",
  "type",
  "province_name",
  "address",
];
const defaultTableThead = [
  "created_at",
  "id",
  "name",
  "responsible_person",
  "responsible_person_cellphone",
  "type",
  "province_name",
  "address",
];
export default {
  components: {
    LogoUpload,
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      addLoading: false,
      // 搜索参数
      searchForm: {
        page: 1,
        count: 10,
      },
      title: "添加商户",
      //类目列表
      CateList: [],
      // 用户列表
      userList: [],
      // 省份列列表
      provinceList: [],
      // 城市列表
      cityList: [],
      // 区县列表
      countyList: [],
      // 单位使用的省市区
      // 省份列列表
      unitprovinceList: [],
      // 城市列表
      unitcityList: [],
      // 区县列表
      unitcountyList: [],
      // 商户列表
      merchantList: [],
      // 总条数
      total: 0,
      // 添加商户弹框控制器
      dialogMerchant: false,
      // 当前添加信息模块
      activeName: "基本信息",
      //关联的用户信息
      form: {
        id: "",
        user_id: "",
        type: 1, // 类型(1.个人,2.企业/个体)
        user_cellphone: "", // 类型(1.个人,2.企业/个体)
        user_name: "", // 类型(1.个人,2.企业/个体)
      },
      formRules: {
        user_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请选择关联的用户"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 基本信息的表单及回显和表单验证
      // 添加商户基本信息参数
      basicForm: {
        name: "", // 名称
        description: "", //介绍
        start_time: "", // 开店时间
        logo_image: "", // logo
        background_image: "", // 背景图
        level: "", // 等级
        star_level: "", // 星级
        unlock_achievements: "", // 解锁成就
        tag_info: "", // 标签
        fans_number: "", // 粉丝人数
        province_id: "", // 省
        city_id: "", // 市
        county_id: "", // 区
        user_name: "", // 联系人名称
        user_cellphone: "", // 联系人手机号
        mer_cate_id: "", // 商铺类目
        operate_category: "",
      },
      logoFile: {},
      background_imageFile: {},
      basicRules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入商户名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("商户名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请选择商户类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        start_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择开店时间"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        province_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择省份"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        city_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择城市"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        county_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择区/县"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        user_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g;
              if (!value) {
                callback(new Error("请输入联系人"));
              } else {
                if (req.test(value)) {
                  callback(new Error("联系人中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        user_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^1[3456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入联系人手机号"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的手机号格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        mer_cate_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择店铺类目"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        description: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入商户介绍"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 公司信息的表单及回显和表单验证
      // 添加商户公司信息参数
      companyForm: {
        name: "", //名称
        social_unified_credit_code: "", //社会统一信用代码
        business_license_address: "", //营业执照所在地
        business_expiration_time: [], //营业期限
        type: 1, //公司类型(1:有限责任公司,2.无限公司,3.两和公司,4.股份有限公司,5.股份两和公司)
        duplicate_of_business_license: "", //营业执照副本照片
        province_id: "", // 省
        city_id: "", // 市
        county_id: "", // 区
        address: "", // 办公详细地址
        office_cellphone: "", // 办公电话(可以是固话或者手机号)
      },
      // 营业执照图片回显
      duplicate_of_business_licenseFile: {},
      companyRules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入单位名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("单位名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        social_unified_credit_code: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^[0-9a-zA-Z]{18}$/;
              if (!value) {
                callback(new Error("请输入社会统一信用代码"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("社会统一信用代码格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        business_license_address: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入营业执照所在地址"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        business_expiration_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择营业执照的期限"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择单位类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        duplicate_of_business_license: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请上传营业执照"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        province_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择单位所在省份"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        city_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择单位所在城市"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        county_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择单位所在区/县"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入单位所在地址"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        office_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^1[3456789]\d{9}$/;
              const reg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
              if (value == "") {
                callback(new Error("请输入单位电话(可以是固话或者手机号)"));
              } else {
                if (req.test(value) || reg.test(value)) {
                  callback();
                } else {
                  callback(new Error("输入的电话格式不正确"));
                }
              }
            },
            trigger: "change",
          },
        ],
      },
      // 法人信息的表单及回显和表单验证
      // 添加法人信息信息参数
      legal_personForm: {
        name: "", // 法人名称
        cellphone: "", // 手机号
        certificate_type: 1, // 证件类型(1.身份证,2.军官证,3.护照....)
        certificate_no: "", // 证件号码
        id_card_front: "", // 身份证正面照
        id_card_reverse: "", // 身份证反面照
        id_card_time_type: 2, // 身份证期限类型(1.长期,2.时间)
        id_card_time: [], //身份证期限(例:2000.01.11-2020.01.11 或者 长期)
      },
      id_card_frontfile: {},
      id_card_reversefile: {},
      legal_personRules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g;
              if (!value) {
                callback(new Error("请输入法人姓名"));
              } else {
                if (req.test(value)) {
                  callback(new Error("法人姓名中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^1[3456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入法人手机号"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的手机号格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        certificate_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择证件类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        certificate_no: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req =
                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
              if (!value) {
                callback(new Error("请输入法人证件号码"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的证件号码格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        id_card_front: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.legal_personForm.id_card_front) {
                callback(new Error("请上传身份证照片(国徽面)"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        id_card_reverse: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.legal_personForm.id_card_reverse) {
                callback(new Error("请上传身份证照片(人像面)"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        id_card_time_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择证件期限"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        id_card_time: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.id_card_time_type == 2) {
                if (!value) {
                  callback(new Error("请选择证件期限"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 商户概况的表单及回显和表单验证
      // 添加商户概况信息参数
      profileForm: {
        brand_establishment_time: "", // 品牌成立时间
        positioning: "", // 品牌定位(1.专卖店,2.旗舰店,3.线上店....)
        target_user: "", // 受众人群 (例:12-40) 单位/岁
        explosive_product_id: "", // 爆品ID
        images: "", // 工厂及仓库规模图
        resident_commitment: "", // 入驻承诺书
        brand_authorization: "", // 品牌授权承诺书
      },
      imagesfile: {},
      resident_commitmentfile: {},
      brand_authorizationfile: {},
      profileRules: {},
      // 收款信息的表单及回显和表单验证
      // 添加收款信息信息参数
      collectionForm: {
        type: 1, // 类型(1.银行卡,2.支付宝,3.微信,4.公账)
        bank_name: "", // 银行名称
        bank_card_number: "", // 开户账号
        bank_branch: "", // 支行名称
        bank_user_name: "", // 开户名称
        reserve_cellphone: "", // 开户手机号
      },
      collectionRules: {
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择收款账户类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^\u4e00-\u9fa5]/g;
              if (req.test(value)) {
                callback(new Error("请输入中文银行名称"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_card_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^[1-9]\d{9,29}$/;
              if (value == "") {
                callback(new Error("请输入对应的银行账户"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("银行账户格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        bank_branch: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^\u4e00-\u9fa5]/g;
              if (req.test(value)) {
                callback(new Error("请输入中文开户行名称"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        bank_user_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5·]/g;
              if (!value) {
                callback(new Error("请输入开户者名字"));
              } else {
                if (req.test(value)) {
                  callback(new Error("开户者名字中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        reserve_cellphone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /^1[3456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入银行预留手机号"));
              } else {
                if (!req.test(value)) {
                  callback(new Error("输入的手机号格式不正确"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getDataList();
    this.getListWay();
  },
  methods: {
    getDataList() {
      getCateList().then((res) => {
        this.CateList = res.data.list;
      });
      getUserList().then((res) => {
        this.userList = res.data.list;
      });
      getRegionList().then((res) => {
        this.provinceList = res.data;
        this.unitprovinceList = res.data;
        this.cityList = this.provinceList[0].children;
        this.unitcityList = this.unitprovinceList[0].children;
        this.countyList = this.cityList[0].children;
        this.unitcountyList = this.unitcityList[0].children;
      });
    },
    getListWay() {
      this.loading = true;
      getMerchantList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.merchantList = res.data.list;
          this.total = res.data.total;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 重置搜索内容
    resettingWay() {
      this.searchForm = {
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    // 打开添加商户弹框
    savemerchantWay(url) {
      this.$router.push(url);
    },
    // 选择省份之后执行
    province_idWay(val) {
      this.basicForm.city_id = "";
      this.basicForm.county_id = "";
      this.cityList = [];
      this.countyList = [];
      this.provinceList.forEach((res) => {
        if (val == res.id) {
          this.cityList = res.children;
          this.countyList = this.cityList[0].children;
        }
      });
    },
    // 单位使用的省份
    unitprovince_idWay(val) {
      this.companyForm.city_id = "";
      this.companyForm.county_id = "";
      this.unitcityList = [];
      this.unitcountyList = [];
      this.unitprovinceList.forEach((res) => {
        if (val == res.id) {
          this.unitcityList = res.children;
          this.unitcountyList = this.unitcityList[0].children;
        }
      });
    },
    // 选择城市之后执行
    city_idWay(val) {
      this.basicForm.county_id = "";
      this.countyList = [];
      this.cityList.forEach((res) => {
        if (val == res.id) {
          this.countyList = res.children;
        }
      });
    },
    unitcity_idWay(val) {
      this.companyForm.county_id = "";
      this.unitcountyList = [];
      this.unitcityList.forEach((res) => {
        if (val == res.id) {
          this.unitcountyList = res.children;
        }
      });
    },
    // 关联用户时获取用户信息并赋值
    userIdWay(val) {
      this.addLoading = true;
      getUserDetail({ id: val })
        .then((res) => {
          this.addLoading = false;
          this.form.user_cellphone = res.data.mobile;
          this.form.user_name = res.data.nickname;
        })
        .catch(() => {
          this.form.user_id = "";
          this.addLoading = false;
          this.$messages.error("请重新选择");
        });
    },
    // 点击上一步执行
    Back() {
      if (this.activeName == "基本信息") {
      } else if (this.activeName == "单位信息") {
        this.activeName = "基本信息";
      } else if (this.activeName == "法人信息") {
        this.activeName = "单位信息";
      } else if (this.activeName == "店铺经营状况") {
        if (this.form.type !== 1) {
          this.activeName = "单位信息";
        } else {
          this.activeName = "基本信息";
        }
      } else if (this.activeName == "收款信息") {
        this.activeName = "店铺经营状况";
      }
    },
    // 点击下一步执行
    nextStep() {
      if (this.activeName == "基本信息") {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$refs.basicForm.validate((valid) => {
              if (valid) {
                if (this.form.type !== 1) {
                  this.activeName = "单位信息";
                } else {
                  this.activeName = "店铺经营状况";
                }
              } else {
                this.$messages.warning("基本信息中有必填项未填");
                return false;
              }
            });
          } else {
            this.$messages.warning("请选择并关联用户信息");
            bool = false;
            return false;
          }
        });
      } else if (this.activeName == "单位信息") {
        this.$refs.companyForm.validate((valid) => {
          if (valid) {
            this.activeName = "法人信息";
          } else {
            this.$messages.warning("单位信息中有必填项未填");
            return false;
          }
        });
      } else if (this.activeName == "法人信息") {
        this.$refs.legal_personForm.validate((valid) => {
          if (valid) {
            this.activeName = "店铺经营状况";
          } else {
            this.$messages.warning("法人信息中有必填项未填");
            return false;
          }
        });
      } else if (this.activeName == "店铺经营状况") {
        this.$refs.profileForm.validate((valid) => {
          if (valid) {
            this.activeName = "收款信息";
          } else {
            this.$messages.warning("店铺经营状况中有必填项未填");
            return false;
          }
        });
      }
    },
    submitFront() {
      var bool = true;
      if (!bool) {
        return false;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.activeName == "基本信息";
          this.$messages.warning("请选择并关联用户信息");
          bool = false;
          return false;
        }
      });
      if (!bool) {
        return false;
      }
      this.$refs.basicForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.activeName = "基本信息";
          this.$messages.warning("基本信息中有必填项未填");
          bool = false;
          return false;
        }
      });
      if (!bool) {
        return false;
      }
      if (this.form.type !== 1) {
        this.$refs.companyForm.validate((valid) => {
          if (valid) {
            return true;
          } else {
            this.activeName = "单位信息";
            this.$messages.warning("单位信息中有必填项未填");
            bool = false;
            return false;
          }
        });
        if (!bool) {
          return false;
        }
        this.$refs.legal_personForm.validate((valid) => {
          if (valid) {
            return true;
          } else {
            this.activeName == "法人信息";
            this.$messages.warning("法人信息中有必填项未填");
            bool = false;
            return false;
          }
        });
        if (!bool) {
          return false;
        }
      }
      this.$refs.profileForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.activeName == "店铺经营状况";
          this.$messages.warning("店铺经营状况中有必填项未填");
          bool = false;
          return false;
        }
      });
      if (!bool) {
        return false;
      }
      this.$refs.collectionForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.activeName == "收款信息";
          this.$messages.warning("收款信息中有必填项未填");
          bool = false;
          return false;
        }
      });
      if (!bool) {
        return false;
      }
      let obj = {};
      let _this = this;
      if (_this.form.mer_id) {
        obj = {
          mer_id: _this.form.mer_id,
          user_id: _this.form.user_id,
          type: _this.form.type,
          apply_info: {
            basic: {
              ..._this.basicForm,
            },
            company: {
              ..._this.companyForm,
            },
            legal_person: {
              ..._this.legal_personForm,
            },
            profile: {
              ..._this.profileForm,
            },
            collection: {
              ..._this.collectionForm,
            },
          },
        };
        if (Array.isArray(obj.apply_info.company.business_expiration_time)) {
          if (obj.apply_info.company.business_expiration_time.length !== 0) {
            obj.apply_info.company.business_expiration_time =
              obj.apply_info.company.business_expiration_time.join(",");
          } else {
            obj.apply_info.company.business_expiration_time = "";
          }
        }
        if (obj.apply_info.legal_person.id_card_time_type == 1) {
          obj.apply_info.legal_person.id_card_time = "长期";
        }
        if (Array.isArray(obj.apply_info.legal_person.id_card_time)) {
          if (obj.apply_info.legal_person.id_card_time.length !== 0) {
            obj.apply_info.legal_person.id_card_time =
              obj.apply_info.legal_person.id_card_time.join(",");
          } else {
            obj.apply_info.legal_person.id_card_time = "";
          }
        }
        if (Array.isArray(obj.apply_info.profile.brand_establishment_time)) {
          if (obj.apply_info.profile.brand_establishment_time.length !== 0) {
            obj.apply_info.profile.brand_establishment_time =
              obj.apply_info.profile.brand_establishment_time.join(",");
          } else {
            obj.apply_info.profile.brand_establishment_time = "";
          }
        }
      } else {
        obj = {
          mer_id: _this.form.mer_id,
          user_id: _this.form.user_id,
          type: _this.form.type,
          data: {
            basic: {
              ..._this.basicForm,
            },
            company: {
              ..._this.companyForm,
            },
            legal_person: {
              ..._this.legal_personForm,
            },
            profile: {
              ..._this.profileForm,
            },
            collection: {
              ..._this.collectionForm,
            },
          },
        };
        if (Array.isArray(obj.data.company.business_expiration_time)) {
          if (obj.data.company.business_expiration_time.length !== 0) {
            obj.data.company.business_expiration_time =
              obj.data.company.business_expiration_time.join(",");
          } else {
            obj.data.company.business_expiration_time = "";
          }
        }
        if (obj.data.legal_person.id_card_time_type == 1) {
          obj.data.legal_person.id_card_time = "长期";
        }
        if (Array.isArray(obj.data.legal_person.id_card_time)) {
          if (obj.data.legal_person.id_card_time.length !== 0) {
            obj.data.legal_person.id_card_time =
              obj.data.legal_person.id_card_time.join(",");
          } else {
            obj.data.legal_person.id_card_time = "";
          }
        }
        if (Array.isArray(obj.data.profile.brand_establishment_time)) {
          if (obj.data.profile.brand_establishment_time.length !== 0) {
            obj.data.profile.brand_establishment_time =
              obj.data.profile.brand_establishment_time.join(",");
          } else {
            obj.data.profile.brand_establishment_time = "";
          }
        }
      }

      _this.submitForm(obj);
    },
    submitForm(obj) {
      var _this = this;
      _this.addLoading = true;
      if (!obj.mer_id) {
        addMerchantList(obj)
          .then((res) => {
            _this.addLoading = false;
            _this.dialogMerchant = false;
            _this.dialogMerchantClose();
            _this.getListWay();
            _this.$messages.success("添加成功");
          })
          .catch(() => {
            this.addLoading = false;
          });
      } else {
        obj.apply_type = 2;
        editMerchantList(obj)
          .then((res) => {
            if (res.code == 200) {
              _this.$messages.success("修改成功");
              _this.addLoading = false;
              _this.dialogMerchant = false;
              _this.dialogMerchantClose();
              _this.getListWay();
            } else {
              _this.$messages.error(res);
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    // 添加修改商户弹框关闭
    dialogMerchantClose() {
      this.basicForm = {
        name: "", // 名称
        description: "", //介绍
        start_time: "", // 开店时间
        logo_image: "", // logo
        background_image: "", // 背景图
        level: "", // 等级
        star_level: "", // 星级
        unlock_achievements: "", // 解锁成就
        tag_info: "", // 标签
        fans_number: "", // 粉丝人数
        province_id: "", // 省
        city_id: "", // 市
        county_id: "", // 区
        user_name: "", // 联系人名称
        user_cellphone: "", // 联系人手机号
        mer_cate_id: "", // 商铺类目
        operate_category: "",
      };
      this.logoFile = {};
      this.background_imageFile = {};
      this.companyForm = {
        name: "", //名称
        social_unified_credit_code: "", //社会统一信用代码
        business_license_address: "", //营业执照所在地
        business_expiration_time: [], //营业期限
        type: 1, //公司类型(1:有限责任公司,2.无限公司,3.两和公司,4.股份有限公司,5.股份两和公司)
        duplicate_of_business_license: "", //营业执照副本照片
        province_id: "", // 省
        city_id: "", // 市
        county_id: "", // 区
        address: "", // 办公详细地址
        office_cellphone: "", // 办公电话(可以是固话或者手机号)
      };
      // 营业执照图片回显
      this.duplicate_of_business_licenseFile = {};

      this.legal_personForm = {
        name: "", // 法人名称
        cellphone: "", // 手机号
        certificate_type: 1, // 证件类型(1.身份证,2.军官证,3.护照....)
        certificate_no: "", // 证件号码
        id_card_front: "", // 身份证正面照
        id_card_reverse: "", // 身份证反面照
        id_card_time_type: 2, // 身份证期限类型(1.长期,2.时间)
        id_card_time: [], //身份证期限(例:2000.01.11-2020.01.11 或者 长期)
      };
      this.id_card_frontfile = {};
      this.id_card_reversefile = {};

      this.profileForm = {
        brand_establishment_time: "", // 品牌成立时间
        positioning: "", // 品牌定位(1.专卖店,2.旗舰店,3.线上店....)
        target_user: "", // 受众人群 (例:12-40) 单位/岁
        explosive_product_id: "", // 爆品ID
        images: "", // 工厂及仓库规模图
        resident_commitment: "", // 入驻承诺书
        brand_authorization: "", // 品牌授权承诺书
      };
      this.imagesfile = {};
      this.resident_commitmentfile = {};
      this.brand_authorizationfile = {};
      this.profileRules = {};

      this.collectionForm = {
        type: 1, // 类型(1.银行卡,2.支付宝,3.微信,4.公账)
        bank_name: "", // 银行名称
        bank_card_number: "", // 开户账号
        bank_branch: "", // 支行名称
        bank_user_name: "", // 开户名称
        reserve_cellphone: "", // 开户手机号
      };

      this.form = {
        user_id: "",
        type: 1, // 类型(1.个人,2.企业/个体)
        user_cellphone: "", // 类型(1.个人,2.企业/个体)
        user_name: "", // 类型(1.个人,2.企业/个体)
      };
      this.activeName = "基本信息";
      this.$refs.basicForm.resetFields();
      this.$refs.profileForm.resetFields();
      if (this.form.type !== 1) {
        this.$refs.companyForm.resetFields();
        this.$refs.legal_personForm.resetFields();
      }
      this.$refs.collectionForm.resetFields();
      this.$refs.form.resetFields();
      this.dialogMerchant = false;
    },
    delGradeWay(row) {
      this.loading = true;
      delMerchant({ id: row.id })
        .then((res) => {
          if (res.code == 200) {
            this.$messages.success("删除成功");
            this.getListWay();
          } else {
            this.$messages.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    switchShowWay(val) {
      this.loading = true;
      var obj = {
        status: val.status,
        id: val.id,
      };
      merchantChange(obj)
        .then((res) => {
          if (res.code == 200) {
            this.$messages.success("修改成功");
            this.getListWay();
          } else {
            this.$messages.error(res);
            this.getListWay();
          }
        })
        .catch(() => {
          this.loading = false;
          this.getListWay();
        });
    },
    // 选择添加信息模块调用
    handleMerchantClick() {},
    // 营业执照图片调用
    licenseCallback() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    // 基本信息图片回调
    logoCallback(file) {
      this.logoFile = file;
      this.basicForm.logo = file.url;
    },
    background_imageCallback(file) {
      this.background_imageFile = file;
      this.basicForm.background_image = file.url;
    },
    // 单位营业执照图片回调
    duplicate_of_business_licenseCallback(file) {
      this.duplicate_of_business_licenseFile = file;
      this.companyForm.duplicate_of_business_license = file.url;
    },
    // 法人身份证(国徽面)图片回调
    id_card_frontCallback(file) {
      this.id_card_frontfile = file;
      this.legal_personForm.id_card_front = file.url;
    },
    // 法人身份证(人像面)图片回调
    id_card_reverseCallback(file) {
      this.id_card_reversefile = file;
      this.legal_personForm.id_card_reverse = file.url;
    },
    // 单位规模图片回调
    imagesCallback(file) {
      this.imagesfile = file;
      this.profileForm.images = file.url;
    },
    // 入驻承诺书图片回调
    resident_commitmentCallback(file) {
      this.resident_commitmentfile = file;
      this.profileForm.resident_commitment = file.url;
    },
    // 品牌授权承诺书图片回调
    brand_authorizationCallback(file) {
      this.brand_authorizationfile = file;
      this.profileForm.brand_authorization = file.url;
    },
    brand_establishment_timeWay(vla) {
      console.log(vla);
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid #ededed;
  margin: 0px 0 20px;
}
</style>